<template>
	<view class="app l_pages" :style="skin">
		<jnavbar :title="'申请商户'"></jnavbar>
		<scroll-view class="page_container" scroll-y>
			<view style="background-color: #fff;padding: 0 32rpx;height: 100%;">
				<u-form :model="form" ref="uForm">
					<u-form-item label-width="160rpx" label="店铺名"><u-input v-model="form.name" /></u-form-item>
					<u-form-item label-width="160rpx" label="店铺logo"><uploadimg :imglist="logos" :maxnum="1" @getimg="getimg"></uploadimg></u-form-item>
					<u-form-item label-width="160rpx" label="营业执照"><uploadimg :imglist="license_imgs" :maxnum="1" @getimg="getlicenseimg"></uploadimg></u-form-item>
					<u-form-item label-width="160rpx" label="电话号码"><u-input v-model="form.mobile" /></u-form-item>
					<u-form-item>
						<u-checkbox v-model="is_agree" shape="circle">
							我已阅读并了解《
							<span class="fonst" @click.stop="getProtocol">商户入驻协议</span>
							》
						</u-checkbox>
					</u-form-item>
					<u-button type="primary" @click="agentapply">确认</u-button>
				</u-form>
			</view>
			<u-popup v-model="show" mode="center" width="600rpx" height="800rpx" border-radius="14" :closeable="true">
				<scroll-view class="popup-content" scroll-y>
					<view class="content_title">{{ popupContent.title }}</view>
					<u-parse :tag-style="style" :domain="baseUrl" :html="popupContent.content" :show-with-animation="true"></u-parse>
				</scroll-view>
			</u-popup>
		</scroll-view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<tab-bar ref="tabbar"></tab-bar>
		<nloading></nloading>
	</view>
</template>
<script>
import {mapState, mapMutations} from 'vuex';
import base from '@/common/baseUrl';
import uploadimg from '@/components/upload/upload.vue';
import util from '@/common/util.js';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			is_agree: false,
			header: {},
			fileList: [],
			action: '',
			logos: [],
			logo: [],
			license_img: [],
			license_imgs: [],
			form: {
				name: '',
				mobile: ''
			},
			show: false,
			popupContent: '',
			style: {
				// 字符串的形式
				p: 'word-wrap : break-word'
			}
		};
	},
	components: {
		uploadimg
	},
	onLoad() {
		// this.getProtocol()
	},
	computed: {
		baseUrl() {
			return util.geturl(base.baseUrl);
		},
		...mapState({
			oss: state => state.oss,
			skin: state => state.skin
		})
	},
	methods: {
		logincallback() {},
		getisagree(e) {
			this.is_agree = !this.is_agree;
		},
		getimg(imglist) {
			this.logo = imglist;
		},
		getlicenseimg(imglist) {
			this.license_img = imglist;
		},
		agentapply() {
			if (this.is_agree) {
				let params = {
					name: this.form.name,
					mobile: this.form.mobile,
					logo: this.logo[0],
					business_license: this.license_img[0]
				};
				this.changeloading({
					loading: true,
					loadtext: '提交中...'
				});

				this.$http('/merchant/apply', params, 'POST').then(res => {
					if (res.statusCode == 201) {
						this.changeloading({
							loading: false
						});

						uni.navigateBack();
					}
				});
			} else {
				uni.showToast({
					title: '请先阅读并同意分销商申请协议',
					icon: 'none'
				});
			}
		},
		// 获取入驻协议信息
		getProtocol() {
			this.show = !this.show;
			this.$http('/protocol/2', {}, 'get').then(res => {
				this.popupContent = res.data.msg;
			});
		}
	}
};
</script>

<style lang="scss">
.uni-block-form {
	width: 686rpx;
	border-radius: 12rpx;
	margin-left: 32rpx;
	padding: 16rpx 24rpx;

	.title {
		border-bottom: 1rpx solid #f5f5f5;
		padding: 16rpx 0;
	}

	.item {
		height: 100rpx;

		.label {
			width: 140rpx;
			font-size: 30rpx;
		}

		input {
			border: none;
		}
	}

	.xieyi {
		justify-content: center;
		padding: 16rpx 0;

		checkbox-group {
			display: flex;
			align-items: center;
		}
	}

	.btns {
		justify-content: center;

		text {
			padding: 12rpx 20rpx;
			border-radius: 16rpx;
		}
	}
}

.fonst {
	text-decoration: underline;
	color: #999999;
}
</style>
